<template>
  <div class="deep-processing-info">
    <!-- 深加工信息 -->
    <div class="info-section">
      <h3>深加工信息</h3>
      <div class="info-header">
        <span>深加工信息</span>
        <el-button size="small" type="primary" @click="openSettings('deepProcessing')">设置</el-button>
        <span class="info-number">1</span>
      </div>
      <div class="info-content">
        <div class="info-row">
          <span>班组：{{ team }}</span>
          <span>负责人：{{ responsiblePerson }}</span>
        </div>
      </div>
    </div>

    <!-- 食品安全信息 -->
    <div class="info-section">
      <h3>食品安全信息</h3>
      <div class="certificate-container">
        <img v-for="(certificate, index) in foodSafetyCertificates" :key="index" :src="certificate.url" alt="食品安全证书" class="certificate-img">
        <el-button size="mini" type="danger" @click="removeFoodSafetyCertificate(index)">X</el-button>
      </div>
      <el-upload
        :action="uploadAction"
        :show-file-list="false"
        :before-upload="beforeUpload"
        class="upload-certificate"
      >
        <div class="upload-icon">+</div>
      </el-upload>
    </div>

    <!-- 供应商信息 -->
    <div class="info-section">
      <h3>供应商信息</h3>
      <div v-for="(material, index) in materials" :key="index" class="material-info">
        <div class="material-header">
          <span>{{ material.name }}</span>
          <el-button size="small" type="primary" @click="openSettings(material.name)">设置</el-button>
          <span class="info-number">{{ index + 2 }}</span>
        </div>
        <div class="material-content">
          <p>生产批次：{{ material.productionBatch }}</p>
          <div class="related-materials">
            <h4>相关材料</h4>
            <img v-for="(relatedMaterial, relIndex) in material.relatedMaterials" :key="relIndex" :src="relatedMaterial.url" alt="相关材料" class="related-material-img">
            <el-button size="mini" type="danger" @click="removeRelatedMaterial(index, relIndex)">X</el-button>
          </div>
          <el-upload
            :action="uploadAction"
            :show-file-list="false"
            :before-upload="beforeUpload"
            class="upload-related-material"
          >
            <div class="upload-icon">+</div>
          </el-upload>
        </div>
      </div>
    </div>

    <!-- 企业信息 -->
    <div class="info-section">
      <h3>企业信息</h3>
      <div class="info-header">
        <span>企业信息</span>
        <el-button size="small" type="primary" @click="openSettings('enterprise')">设置</el-button>
        <span class="info-number">6</span>
      </div>
      <div class="info-content">
        <p>公司名称：{{ enterpriseInfo.companyName }}</p>
        <p>生产许可证号：{{ enterpriseInfo.productionLicense }}</p>
      </div>
    </div>

    <!-- 企业照片 -->
    <div class="info-section">
      <h3>企业照片</h3>
      <div class="photo-container">
        <img v-for="(photo, index) in enterprisePhotos" :key="index" :src="photo.url" alt="企业照片" class="photo-img">
        <el-button size="mini" type="danger" @click="removePhoto(index)">X</el-button>
      </div>
      <el-upload
        :action="uploadAction"
        :show-file-list="false"
        :before-upload="beforeUpload"
        class="upload-photo"
      >
        <div class="upload-icon">+</div>
      </el-upload>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 深加工信息数据
const team = ref('生产1组');
const responsiblePerson = ref('小陈');

// 食品安全证书数据
const foodSafetyCertificates = ref([
  { url: 'https://example.com/foodSafetyCertificate1.jpg' },
  { url: 'https://example.com/foodSafetyCertificate2.jpg' }
]);

// 供应商材料数据
const materials = ref([
  {
    name: '原料',
    productionBatch: '20210718',
    relatedMaterials: [
      { url: 'https://example.com/related1.jpg' },
      { url: 'https://example.com/related2.jpg' },
      { url: 'https://example.com/related3.jpg' }
    ]
  },
  {
    name: '辅料',
    productionBatch: '20210718',
    relatedMaterials: [
      { url: 'https://example.com/related4.jpg' },
      { url: 'https://example.com/related5.jpg' },
      { url: 'https://example.com/related6.jpg' }
    ]
  },
  {
    name: '添加剂',
    productionBatch: '20210718',
    relatedMaterials: [
      { url: 'https://example.com/related7.jpg' },
      { url: 'https://example.com/related8.jpg' },
      { url: 'https://example.com/related9.jpg' }
    ]
  },
  {
    name: '包材',
    productionBatch: '20210718',
    relatedMaterials: [
      { url: 'https://example.com/related10.jpg' },
      { url: 'https://example.com/related11.jpg' },
      { url: 'https://example.com/related12.jpg' }
    ]
  }
]);

// 企业信息数据
const enterpriseInfo = ref({
  companyName: '四川锦祥食品有限公司',
  productionLicense: 'SC1231234567890'
});

// 企业照片数据
const enterprisePhotos = ref([
  { url: 'https://example.com/photo1.jpg' },
  { url: 'https://example.com/photo2.jpg' }
]);

const uploadAction = '#'; // 实际上传地址
const isUploading = ref(false);

const beforeUpload = (file: any) => {
  ElMessage.info('上传功能暂未实现');
  return false;
};

const removeFoodSafetyCertificate = (index: number) => {
  foodSafetyCertificates.value.splice(index, 1);
};

const removeRelatedMaterial = (materialIndex: number, relIndex: number) => {
  materials.value[materialIndex].relatedMaterials.splice(relIndex, 1);
};

const removePhoto = (index: number) => {
  enterprisePhotos.value.splice(index, 1);
};

const openSettings = (type: string) => {
  ElMessage.info(`暂未实现 ${type} 设置功能`);
};
</script>

<style scoped>
.deep-processing-info {
  padding: 20px;
  height: 500px; /* 设置一个固定的高度，你可以根据实际需求调整 */
  overflow-y: auto; /* 当内容超过高度时显示垂直滚动条 */
}

.info-section {
  margin-bottom: 20px;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0088ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.info-content {
  border: 1px solid #ccc;
  padding: 10px;
}

.info-row {
  display: flex;
  margin-bottom: 5px;
}

.certificate-container {
  display: flex;
  flex-wrap: wrap;
}

.certificate-img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-certificate {
  width: 150px;
  height: 100px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.material-info {
  margin-bottom: 15px;
}

.material-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.material-content {
  border: 1px solid #ccc;
  padding: 10px;
}

.related-materials {
  margin-top: 10px;
}

.related-material-img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-related-material {
  width: 150px;
  height: 100px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.photo-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.photo-img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-photo {
  width: 150px;
  height: 100px;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>